<template>
  <div>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <el-card shadow="hover">
          <div slot="header">柱状图</div>
          <chart autoresize :options="barChart"></chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <el-card shadow="hover">
          <div slot="header">环形图</div>
          <chart ref="myCircle" autoresize theme="jtheme" :options="circleChart" class="my-circle"></chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
        <el-card shadow="hover">
          <div slot="header">关系图</div>
          <div>
            <chart ref="myLine1" theme="jtheme" autoresize :options="relationChart" class="my-line1" />
          </div>
        </el-card>
      </el-col>
      <el-col>
        <el-card shadow="never" class="card">
          <div slot="header"><span>中国地图</span></div>
          <chart :autoresize="true" theme="jtheme" :options="cnMap"></chart>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import Chart from '@/plugins/echarts';

export default {
  name: 'TemplateEchart',
  components: { Chart },
  data() {
    return {
      barChart: {
        grid: {
          top: '25%',
          bottom: '10%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
            },
          },
        },
        legend: {
          data: ['销售水量', '主营业务'],
        },
        xAxis: {
          data: [
            '当年完成水量',
            '去年同期水量',
            '滚动目标值水量',
            '全年目标值水量',
            '当年完成金额',
            '去年同期金额',
            '滚动目标金额',
            '全年目标值',
          ],
          axisLine: {
            show: true, //隐藏X轴轴线
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '亿元',
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
            },
          },
          {
            type: 'value',
            name: '同比',
            position: 'right',
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: '{value} %', //右侧Y轴文字显示
            },
          },
          {
            type: 'value',
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)'],
              },
            },
          },
        ],
        series: [
          {
            name: '销售水量',
            type: 'line',
            smooth: true, //平滑曲线显示
            itemStyle: {
              color: '#058cff',
            },
            areaStyle: {
              color: 'rgba(5,140,255, 0.2)',
            },
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
          },
          {
            name: '主营业务',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00FFE3',
                  },
                  {
                    offset: 1,
                    color: '#4693EC',
                  },
                ]),
              },
            },
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
          },
        ],
      },
      circleChart: {
        tooltip: {
          show: true,
          formatter: '{b}:{c}',
        },
        legend: {
          show: true,
          icon: 'circle',
          top: '10%',
          left: '10%',
          width: 50,
          padding: [0, 5],
          itemGap: 25,
          data: ['已婚已育', '已婚未育', '未婚', '学生'],
          selectedMode: true,
          orient: 'vertical',
        },
        series: [
          {
            name: 'Line 4',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            radius: ['65%', '75%'],

            data: [
              {
                value: 7645434,
                name: '已婚已育',
              },
              {
                value: 3612343,
                name: '总数',
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0,0)',
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                  emphasis: {
                    color: 'rgba(0,0,0,0)',
                  },
                },
              },
            ],
          },
          {
            name: 'Line 3',
            type: 'pie',
            clockWise: true,
            radius: ['50%', '60%'],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                // shadowBlur: 15,
                // shadowColor: 'white',
              },
            },
            hoverAnimation: false,
            data: [
              {
                value: 2632321,
                name: '已婚未育',
              },
              {
                value: 2212343,
                name: '总数',
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0,0)',
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                  emphasis: {
                    color: 'rgba(0,0,0,0)',
                  },
                },
              },
            ],
          },
          {
            name: 'Line 2',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            radius: ['35%', '45%'],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                // shadowBlur: 15,
                // shadowColor: 'white',
              },
            },

            data: [
              {
                value: 1823323,
                name: '未婚',
              },
              {
                value: 1812343,
                name: '总数',
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0,0)',
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                  emphasis: {
                    color: 'rgba(0,0,0,0)',
                  },
                },
              },
            ],
          },
          {
            name: 'Line 1',
            type: 'pie',
            clockWise: true,

            radius: ['20%', '30%'],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                // shadowBlur: 15,
                // shadowColor: 'white',
              },
            },
            hoverAnimation: false,

            data: [
              {
                value: 1342221,
                name: '学生',
              },
              {
                value: 1912343,
                name: '总数',
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0,0)',
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                  emphasis: {
                    color: 'rgba(0,0,0,0)',
                  },
                },
              },
            ],
          },
        ],
      },
      relationChart: {
        series: [
          {
            type: 'graph',
            layout: 'force',
            symbolSize: 58,
            draggable: true,
            roam: true,
            focusNodeAdjacency: true,
            categories: [
              {
                name: '公司',
                itemStyle: {
                  color: '#006acc',
                },
              },
              {
                name: '董事',
                itemStyle: {
                  color: '#ff7d18',
                },
              },
            ],
            edgeSymbol: ['', 'arrow'],
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 20,
                },
                formatter(x) {
                  return x.data.name;
                },
              },
            },
            label: {
              show: true,
            },
            force: {
              repulsion: 2000,
              edgeLength: 120,
            },
            data: [
              {
                name: '操作系统集团',
              },
              {
                name: '浏览器有限公司',
              },
              {
                name: 'HTML科技',
              },
              {
                name: 'JavaScript科技',
              },
              {
                name: 'CSS科技',
              },
              {
                name: 'Chrome',
              },
              {
                name: 'IE',
              },
              {
                name: 'Firefox',
              },
              {
                name: 'Safari',
              },
            ],
            links: [
              {
                source: '浏览器有限公司',
                target: '操作系统集团',
                name: '参股',
              },
              {
                source: 'HTML科技',
                target: '浏览器有限公司',
                name: '参股',
              },
              {
                source: 'CSS科技',
                target: '浏览器有限公司',
                name: '参股',
              },
              {
                source: 'JavaScript科技',
                target: '浏览器有限公司',
                name: '参股',
              },
              {
                source: 'Chrome',
                target: '浏览器有限公司',
                name: '董事',
              },
              {
                source: 'IE',
                target: '浏览器有限公司',
                name: '董事',
              },
              {
                source: 'Firefox',
                target: '浏览器有限公司',
                name: '董事',
              },
              {
                source: 'Safari',
                target: '浏览器有限公司',
                name: '董事',
              },
              {
                source: 'Chrome',
                target: 'JavaScript科技',
                name: '法人',
              },
            ],
          },
        ],
      },
      cnMap: {
        title: {
          text: '2020年全国GDP分布',
          subtext: '数据是随机写的',
        },
        tooltip: {
          trigger: 'item',
        },
        dataRange: {
          orient: 'horizontal',
          min: 0,
          max: 55000,
          text: ['高', '低'],
          splitNumber: 0,
        },
        series: [
          {
            name: '2099年全国GDP分布',
            type: 'map',
            roam: false,
            mapType: 'china',
            mapLocation: {
              x: 'center',
            },
            selectedMode: 'multiple',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
            data: [
              { name: '西藏', value: 605.83 },
              { name: '青海', value: 1670.44 },
              { name: '宁夏', value: 2102.21 },
              { name: '海南', value: 2522.66 },
              { name: '甘肃', value: 5020.37 },
              { name: '贵州', value: 5701.84 },
              { name: '新疆', value: 6610.05 },
              { name: '云南', value: 8893.12 },
              { name: '重庆', value: 10011.37 },
              { name: '吉林', value: 10568.83 },
              { name: '山西', value: 11237.55 },
              { name: '天津', value: 11307.28 },
              { name: '江西', value: 11702.82 },
              { name: '广西', value: 11720.87 },
              { name: '陕西', value: 12512.3 },
              { name: '黑龙江', value: 12582 },
              { name: '内蒙古', value: 14359.88 },
              { name: '安徽', value: 15300.65 },
              { name: '北京', value: 16251.93 },
              { name: '福建', value: 17560.18 },
              { name: '上海', value: 19195.69 },
              { name: '湖北', value: 19632.26 },
              { name: '湖南', value: 19669.56 },
              { name: '四川', value: 21026.68 },
              { name: '辽宁', value: 22226.7 },
              { name: '河北', value: 24515.76 },
              { name: '河南', value: 26931.03 },
              { name: '浙江', value: 32318.85 },
              { name: '山东', value: 45361.85, selected: true },
              { name: '江苏', value: 49110.27 },
              { name: '广东', value: 53210.28 },
            ],
          },
        ],
      },
    };
  },
  mounted() {},
};
</script>

<style></style>
